<template>
  <div class="consensus-activity-record">
    <c-title text="活动记录"></c-title>
    <div class="box">
      <div class="box-item" v-for="item in list" :key="item.id">
        <div class="title">
          <p  style="font-size: 0.9375rem; font-weight: bold;">{{ item.has_one_activity.activity_name }}【{{item.has_one_activity.activity_sn}}】</p>
          <span class="status" :class=" item.has_one_activity.status==1?'status-current':'' ">{{item.has_one_activity.status_name}}</span>
        </div>
        <div class="line"></div>
        <p class="count">存储数量：{{item.total_yuan}}</p>
        <p class="time">时间：{{item.has_one_activity.start_date}}-{{ item.has_one_activity.finish_date }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      total_page: 1,
      isLoadMore: true,
      page: 1,
    };
  },
  activated() {
    this.getData()
  },
  methods: {
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
    getData(page=1) {
      $http.get("plugin.wise-yuan-trade.frontend.consensus-activity.sign-record",{page},"").then(res=>{
        this.isLoadMore = true;
        if(res.result){
          let data = res.data;
          (page==1)?(this.list = data.data):(this.list=this.list.concat(data.data));
          this.total_page = data.last_page;
          this.page = data.current_page;
        }else{
          this.$toast(res.msg);
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.consensus-activity-record {
  padding: 0.7813rem;

  .status-current {
    background: #feeded !important;
    color: #f15353 !important;
  }

  .box-item {
    background: #fff;
    margin-bottom: 0.625rem;
    border-radius: 0.625rem;
    padding: 0.9375rem 0.75rem;
  }

  .line {
    width: 100%;
    height: 1px;
    background: #f0f0f1;
    margin: 0.6875rem 0;
  }

  .time {
    text-align: left;
    color: #aaaab3;
    font-size: 0.75rem;
    margin-top: 0.3438rem;
  }

  .count {
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #00001c;
  }

  .status {
    flex-shrink: 0;
    margin-left: 1.0938rem;
    background: #f0f0f1;
    border-radius: 0.25rem;
    color: #3b3b4a;
    padding: 0.2813rem 0.625rem;
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
}
</style>
